import React, {useEffect, useState} from "react";
import {Avatar, Button, Card, CardGroup, List, SideSheet, Skeleton, Toast, Typography} from "@douyinfe/semi-ui";
import {ArticleControllerService, ArticleTinyVo} from "../../service";
import {Link} from "react-router-dom";
import {AvatarColor} from "@douyinfe/semi-ui/lib/es/avatar";

const ArticleNewsView: React.FC = () => {
    const {Text} = Typography;
    const loading = false;
    const noMore = false;
    const placeholder = (
        <div
            style={{
                display: 'flex',
                alignItems: 'flex-start',
                padding: 12,
                borderBottom: '1px solid var(--semi-color-border)',
            }}
        >
            <Skeleton.Avatar style={{marginRight: 12}}/>
            <div>
                <Skeleton.Title style={{width: 120, marginBottom: 12, marginTop: 12}}/>
                <Skeleton.Paragraph style={{width: 600}} rows={2}/>
            </div>
        </div>
    );
    const loadMore =
        !loading && !noMore ? (
            <div
                style={{
                    textAlign: 'center',
                    marginTop: 12,
                    height: 32,
                    lineHeight: '32px',
                }}
            >
                <Button onClick={() => {
                    loadData();
                }}>显示更多</Button>
            </div>
        ) : null;
    const [visible, setVisible] = useState(false);
    const [page, setPage] = useState(1);
    const [dataList, setDataList] = useState<ArticleTinyVo[]>([]);
    const loadData = async () => {

        const res = await ArticleControllerService.articleTinyVoListByPage({
            page: page,
            pageSize: 10,
        });
        if (!res.data) {
            Toast.error("数据加载失败:" + res.message);
            return;
        }
        setPage(page+1);
        const data = res?.data?.records ?? [];
        if(data.length===0){
            Toast.info({content:"没有更多了"});
        }
        setDataList([
            ...dataList,
            ...data,
        ]);

    }
    useEffect(() => {
        loadData();
    }, [])
    return (

        <div style={{position: "relative", width: "100%", height: "100%"}}>
            <div style={{
                height:'100%',
                width: '100%',
                position:"absolute",
                flexFlow: "column",
            }}>
                <List
                    loading={false}
                    loadMore={loadMore}
                    dataSource={dataList}
                    renderItem={(item )=> {
                        let color:AvatarColor;
                        let header;
                        if(item.type=="Markdown"){
                            color="blue";
                            header="Md";
                        }else if(item.type==="Slate"){
                            color="yellow";
                            header="Slate";
                        }
                        let url;
                        if(item.type==="Slate"){
                            url="/view/slate"
                        }else if(item.type==="Markdown"){
                            url="/view/md"
                        }
                        return (<Skeleton placeholder={placeholder} loading={false}>
                            <List.Item
                                //@ts-ignore
                                header={<Avatar color={color}>{header}</Avatar>}
                                main={
                                    <Link to={url+"?id="+item.id}  style={{ textDecoration: "none" }}>
                                        <div>
                                    <span style={{color: 'var(--semi-color-text-0)', fontWeight: 500}}>{item.title}</span>
                                            <p style={{color: 'var(--semi-color-text-2)', margin: '4px 0'}}>
                                                {item.description}
                                            </p>
                                        </div>
                                    </Link>

                                }
                            />
                        </Skeleton>)
                    }}
                />
            </div>
            <div style={{margin: "auto", right: '5%', width: "fit-content",
                position:'fixed',
                bottom:'10%',
            }}>
                <Avatar onClick={() => {
                    setVisible(!visible)
                }} size="large" style={{ margin: 4 }} alt='User'>
                    发布文章
                </Avatar>

            </div>
            <SideSheet title="发布文章" visible={visible} onCancel={() => {
                setVisible(!visible);
            }}
                       size={"small"}>
                <CardGroup spacing={12}>
                    <Card
                        shadows='hover'
                        title='新建Markdown'
                        headerLine={false}
                        style={{width: "100%"}}
                        headerExtraContent={
                        <Link to={'/edit/md'}>
                            <Text link>
                                新建
                            </Text>
                        </Link>

                        }
                    >
                        <Text>Markdown支持文字、代码块、图片、表格等格式</Text>
                    </Card>
                    <Card
                        shadows='hover'
                        title='新建Slate(不稳定测试版)'
                        headerLine={false}
                        style={{width: "100%"}}
                        headerExtraContent={
                            <Link to={'/edit/slate'}>
                                <Text link>
                                    新建
                                </Text>
                            </Link>

                        }
                    >
                        <Text>Slate支持富文本，协同编辑</Text>
                    </Card>
                    <Card
                        shadows='hover'
                        title='新建Excalidraw(开发中)'
                        headerLine={false}
                        style={{width: "100%"}}
                        headerExtraContent={
                            <Text link>
                                新建
                            </Text>
                        }
                    >
                        <Text>Excalidraw支持手绘、文字、图片格式</Text>
                    </Card>
                </CardGroup>
            </SideSheet>
        </div>
    )
}
export default ArticleNewsView;
